<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .logVisible{
            width: 800px;
            height: 800px;
            margin: 0 auto;
        }
        .el-dialog__footer{
            height: 100px;
            padding-bottom: 5px;
        }
        .p_img{
            transition-duration: 2s;
        }
        .p_img:hover{
            transform: scale(1.1);
        }
    </style>
</head>
<body>
<div style=" width: 1200px;
            height: 100%;
            margin: 0 auto;
            background-color: rgba(216,214,246,0.42);" id="app">
    <el-container style="width: 1200px;margin: 0 auto">
        <el-header style="padding: 0">
            <el-menu
                    background-color="#56329b"
                    text-color="#fff"
                    active-text-color="#fff"
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect">
                <el-menu-item style="left:160px" v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                <div>
                    <el-avatar style="float: right;position: relative;
                    right: 20px;top: 10px" :size="40" :src="circleUrl">
                    </el-avatar>
                </div>
                <div style="float: right;position: relative;
                     right:40px;top: 10px; color:white"
                >
                    <a style="text-decoration: none;color:white" href="">注册</a>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text"
                               style="text-decoration: none;color:white"
                               @click="outerVisible = true">登录</el-button>

                    <el-dialog class="logVisible" center title="登录" :visible.sync="outerVisible">
                        <el-form >
                            <el-form-item>
                                <el-input style="width: 350px;" type="text" placeholder="用户名/邮箱" v-model="user.username" :visible.sync="outerVisible"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-input style="width: 350px; " type="password" placeholder="密码" v-model="user.password" :visible.sync="outerVisible" ></el-input>
                            </el-form-item>
                            <el-button style="width:350px " type="primary">登录</el-button>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <a style="text-decoration: none;color: #b1b1b1" href="">忘记密码</a>
                            <el-divider direction="vertical"></el-divider>
                            <a style="text-decoration: none;color: #b1b1b1" href="">注册</a>
                        </div>
                    </el-dialog>
                </div>
                <div style="float: right;position: relative;right: 60px;top: 10px">
                    <el-input placeholder="请输入搜索内容" v-model="wd">
                        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                    </el-input>
                </div>
            </el-menu>
        </el-header>

        <el-container>
            <el-container style="margin: 10px">
                <el-aside style="width: 290px;">
                    <el-tabs style="height: 400px;" :tab-position="tabPosition" type="border-card">
                        <el-tab-pane label="数码科技">
                            <p>手机</p>
                            <p>平板</p>
                            <p>相机</p>
                            <p>台式电脑</p>
                            <p>笔记本电脑</p>
                        </el-tab-pane>
                        <el-tab-pane label="影音家电">
                            <p>电视</p>
                            <p>冰箱</p>
                            <p>空调</p>
                            <p>洗衣机</p>
                            <p>音响</p>
                        </el-tab-pane>
                        <el-tab-pane label="鞋服配饰">
                            <p>跑步鞋</p>
                            <p>休闲鞋</p>
                            <p>男装</p>
                            <p>女装</p>
                        </el-tab-pane>
                        <el-tab-pane label="运动代步">
                            <p>电动车</p>
                            <p>自行车</p>
                            <p>篮球</p>
                            <p>足球</p>
                        </el-tab-pane>
                        <el-tab-pane label="书籍文具">
                            <p>专业书</p>
                            <p>经典书</p>
                        </el-tab-pane>
                        <el-tab-pane label="其他">
                            <p>百货</p>
                        </el-tab-pane>
                    </el-tabs>
                </el-aside>
                <el-main style="padding: 0">
                    <!--轮播图开始-->
                    <el-carousel style="width: 890px; margin: 0;" height="400px">
                        <el-carousel-item v-for="b in bannerArr">
                            <img :src="b" width="100%" height="100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                    <!--轮播图结束-->
                </el-main>
            </el-container>
            <el-main style="padding:0" v-for="m in mArr">
                <div style="margin: 20px 30px">
                    <b style="color:#56329b;font-size: 25px;">{{m.name}}</b>
                </div>
                <!--商品列表开始-->
                <el-row style="margin: 0 auto;" gutter="20">
                    <el-col span="6" v-for="p in productArr">
                        <el-card>
                            <img class="p_img" :src="p.url" width="100%" alt="">
                            <div>
                                <p style="font-size: 15px;height: 40px;margin-top: 0">
                                    <a style="text-decoration: none;color: #3f3f3f">{{p.title}}</a>
                                </p>
                                <p style="font-size: 12px;color: #666">￥{{p.price}} 浏览量:{{p.saleCount}}
                                    <input type="button" style="float: right" value="加入购物车">
                                </p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <!--商品列表结束-->

            </el-main>
            <el-pagination
                    style="margin:10px auto"
                    background
                    layout="prev, pager, next"
                    :total="100">
            </el-pagination>
            <a style="text-decoration: none;color:#56329b;margin:10px auto" href="">返回顶部</a>
            <el-footer style="height:230px;padding: 0;">
                <div style="background-color:white;text-align: center;">
                    <el-row>
                        <el-col :span="8"><div class="grid-content bg-purple">
                            <h1>关于我们</h1>
                            <span>
                                该网站成立与2017年，是仲恺农业工<br>
                                程学院最大的校内二手交易网站。拥有<br>
                                2000万注册用户和10万注册企业和合<br>
                                作伙伴。日常在线活动用户约90万。<br>
                                交易金额最大可达1亿/日。
                            </span>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple-light">
                            <h1>团队信息</h1>
                            <span>
                            该网站由WSK和XYF协力完成。有入<br>
                            职意向的求职者可以主动向WSK提交<br>
                            求职简介，并将求职简介发送
                        </span>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">
                            <h1>版权声明</h1>
                            <spqn>
                                本网站社区发布的所有信息，都视为发<br>
                                布者同意本网站免费予以使用;同时本<br>
                                网站认为其发布的信息有侵权.违法等<br>
                                行为的,有权予以修改、删除或通知发<br>
                                布者予以纠正的权利，发布者不得阻止<br>
                                或拒绝。
                            </spqn>
                        </div></el-col>
                    </el-row>
                </div>
                <div style="height: 40px;background-color:#56329b;color: white;text-align: center;">
                    <span style="line-height: 40px;">Copyright @ 2017.Company name All rights reserved.</span>
                </div>
            </el-footer>
        </el-container>

    </el-container>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user:{
                    username:"",
                    password:"",
                },
                outerVisible: false,
                mArr: [
                    {name: "数码科技"},
                    {name: "影音家电"},
                    {name: "鞋服配饰"},
                    {name: "运动代步"},
                    {name: "书籍文具"}
                ],
                tabPosition: 'left',
                bannerArr: ["imgs/b1.jpg", "imgs/b2.jpg", "imgs/b3.jpg", "imgs/b4.jpg",],
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                wd: "",
                categoryArr: [
                    {id: 1, name: "首页"},
                    {id: 2, name: "商城"},
                    {id: 3, name: "求购商城"},
                    {id: 4, name: "反馈与意见"},
                    {id: 5, name: "联系我们"},
                    {id: 6, name: "加入购物车"},
                ],
                activeIndex: '1',
                productArr: [{
                    title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
                    price: 233,
                    oldPrice: 598,
                    url: "imgs/a.jpg",
                    saleCount: 2342
                },
                    {
                        title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/b.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/c.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/d.jpg",
                        saleCount: 2342
                    }]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            search() {
                //跳转到结果页面,把搜索内容传递过去
                location.href = "/result.html?wd=" + v.wd;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },

        }
    })
</script>
</html>
